<template>
  <div>
    <!-- <div class="bg-white grid-content">
      <el-form :inline="true" :model="yjbbForm" class="demo-form-inline">

        <el-form-item label="日期:">
          <el-date-picker v-model="searchDate" align="right" type="date" placeholder="请选择日期"
                          :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button type="success">下载</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="bg-white grid-content">

      <el-tabs v-model="activeName" type="card" @tab-click="handleMenuClick">
        <el-tab-pane label="总览" name="first">总览</el-tab-pane>
        <el-tab-pane label="电量统计" name="second">电量统计</el-tab-pane>
        <el-tab-pane label="月负荷最大值" name="third">月负荷最大值</el-tab-pane>
        <el-tab-pane label="出线电量" name="fourth">出线电量</el-tab-pane>
        <el-tab-pane label="指标统计" name="fifth">指标统计</el-tab-pane>
        <el-tab-pane label="设备评级" name="sixth">设备评级</el-tab-pane>
        <el-tab-pane label="电压统计" name="seventh">电压统计</el-tab-pane>
        <el-tab-pane label="操作次数统计" name="eighth">操作次数统计</el-tab-pane>
        <el-tab-pane label="缺陷及处理情况" name="ninth">缺陷及处理情况</el-tab-pane>
        <el-tab-pane label="运行说明" name="tenth">运行说明</el-tab-pane>
        <el-tab-pane label="安全措施、反事故措施执行情况" name="eleventh">安全措施、反事故措施执行情况</el-tab-pane>
      </el-tabs>

      <!-- 总览表格 -->
      <el-table :data="zonglanTableData" v-show="zonglanVisible">
        <el-table-column type="index" label="序号" :index="indexMethod">
        </el-table-column>
        <el-table-column align="center" prop="id" label="表号">
        </el-table-column>
        <el-table-column align="center" prop="dwmc" label="单位名称">
        </el-table-column>
        <el-table-column align="center" prop="bcdw" label="保存单位">
        </el-table-column>
        <el-table-column align="center" prop="tbsj" label="填报时间">
        </el-table-column>
        <el-table-column align="center" prop="zbren" label="制表人">
        </el-table-column>
        <el-table-column align="center" prop="shren" label="审核人">
        </el-table-column>
        <el-table-column align="center" prop="bcqx" label="保存期限">
        </el-table-column>
      </el-table>
      <!-- 电量统计表格 -->
      <el-table :data="dianliangtongjiTableData" v-show="dianliangtongjiVisible">
        <el-table-column type="index" label="序号" :index="indexMethod">
        </el-table-column>
        <el-table-column align="center" prop="fid" label="父表号">
        </el-table-column>
        <el-table-column align="center" label="电源进线">
          <el-table-column align="center" prop="dyjxKwh" label="Kwh">
          </el-table-column>
          <el-table-column align="center" prop="dyjxKvarh" label="Kvarh">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="主变35kv">
          <el-table-column align="center" prop="zbsswkvKwh" label="Kwh">
          </el-table-column>
          <el-table-column align="center" prop="zbsswkvKvarh" label="Kvarh">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="主变10kv">
          <el-table-column align="center" prop="zbskvKwh" label="Kwh">
          </el-table-column>
          <el-table-column align="center" prop="zbskvKvarh" label="Kvarh">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="进出差额">
          <el-table-column align="center" prop="jcceKwh" label="Kwh">
          </el-table-column>
          <el-table-column align="center" prop="jcceKvarh" label="Kvarh">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="主变平均损耗">
          <el-table-column align="center" prop="zbpjshKwh" label="Kwh">
          </el-table-column>
          <el-table-column align="center" prop="zbpjshKvarh" label="Kvarh">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="35kv出线">
          <el-table-column align="center" prop="sswkvcxKwh" label="Kwh">
          </el-table-column>
          <el-table-column align="center" prop="sswkvcxKvarh" label="Kvarh">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="10kv出线">
          <el-table-column align="center" prop="skvcxKwh" label="Kwh">
          </el-table-column>
          <el-table-column align="center" prop="skvcxKvarh" label="Kvarh">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="dldrq" label="电力电容器">
        </el-table-column>
        <el-table-column align="center" prop="ll" label="力率">
        </el-table-column>
        <el-table-column align="center" prop="sydl" label="所用电量">
        </el-table-column>
        <el-table-column align="center" prop="bz" label="备注">
        </el-table-column>

      </el-table>
      <!-- 月负荷最大值统计表格 -->
      <el-table :data="yfhzdzjcxdlTableData" v-show="yfhzdzjcxdlVisible">
        <el-table-column type="index" label="序号" :index="indexMethod">
        </el-table-column>
        <el-table-column align="center" prop="fid" label="父表号">
        </el-table-column>
        <el-table-column align="center" label="一号主变">
          <el-table-column align="center" label="A">
            <el-table-column align="center" prop="yhzbAsswkv" label="35kv">
            </el-table-column>
            <el-table-column align="center" prop="yhzbAskv" label="10kv">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="KW">
            <el-table-column align="center" prop="yhzbKWsswkv" label="35kv">
            </el-table-column>
            <el-table-column align="center" prop="yhzbKWskv" label="10kv">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="二号主变">
          <el-table-column align="center" label="A">
            <el-table-column align="center" prop="ehzbAsswkv" label="35kv">
            </el-table-column>
            <el-table-column align="center" prop="ehzbAskv" label="10kv">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="KW">
            <el-table-column align="center" prop="ehzbKWsswkv" label="35kv">
            </el-table-column>
            <el-table-column align="center" prop="ehzbKWskv" label="10kv">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="81109">
          <el-table-column align="center" label="A">
            <el-table-column align="center" prop="byyljAsswkv" label="35kv">
            </el-table-column>
            <el-table-column align="center" prop="byyljAskv" label="10kv">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="81110">
          <el-table-column align="center" label="A">
            <el-table-column align="center" prop="byyylAsswkv" label="35kv">
            </el-table-column>
            <el-table-column align="center" prop="byyylAskv" label="10kv">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="81111">
          <el-table-column align="center" label="A">
            <el-table-column align="center" prop="byyyyAsswkv" label="35kv">
            </el-table-column>
            <el-table-column align="center" prop="byyyyAskv" label="10kv">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="81112">
          <el-table-column align="center" label="A">
            <el-table-column align="center" prop="byyyeAsswkv" label="35kv">
            </el-table-column>
            <el-table-column align="center" prop="byyyeAskv" label="10kv">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="81113">
          <el-table-column align="center" label="A">
            <el-table-column align="center" prop="byyysAsswkv" label="35kv">
            </el-table-column>
            <el-table-column align="center" prop="byyysAskv" label="10kv">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="81114">
          <el-table-column align="center" label="A">
            <el-table-column align="center" prop="byyyfAsswkv" label="35kv">
            </el-table-column>
            <el-table-column align="center" prop="byyyfAskv" label="10kv">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="81115">
          <el-table-column align="center" label="A">
            <el-table-column align="center" prop="byyywAsswkv" label="35kv">
            </el-table-column>
            <el-table-column align="center" prop="byyywAskv" label="10kv">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="81116">
          <el-table-column align="center" label="A">
            <el-table-column align="center" prop="byyyliuAsswkv" label="35kv">
            </el-table-column>
            <el-table-column align="center" prop="byyyliuAskv" label="10kv">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="81117">
          <el-table-column align="center" label="A">
            <el-table-column align="center" prop="byyyqAsswkv" label="35kv">
            </el-table-column>
            <el-table-column align="center" prop="byyyqAskv" label="10kv">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="81118">
          <el-table-column align="center" label="A">
            <el-table-column align="center" prop="byyybAsswkv" label="35kv">
            </el-table-column>
            <el-table-column align="center" prop="byyybAskv" label="10kv">
            </el-table-column>
          </el-table-column>
        </el-table-column>

      </el-table>

      <!--      出线电量统计表格-->
      <el-table :data="cxdlTableData" v-show="cxdlVisible">
        <el-table-column type="index" label="序号" :index="indexMethod">
        </el-table-column>
        <el-table-column align="center" prop="fid" label="父表号">
        </el-table-column>
        <el-table-column align="center" prop="cxmc" label="出线名称">
        </el-table-column>
        <el-table-column align="center" prop="ygdl" label="有功电量">
        </el-table-column>
        <el-table-column align="center" prop="wgdl" label="无功电量">
        </el-table-column>
        <el-table-column align="center" prop="glys" label="功率因数">
        </el-table-column>
      </el-table>
      <!-- 指标统计表格 -->
      <el-table :data="zbtjTableData" v-show="zbtjVisible">
        <el-table-column type="index" label="序号">
        </el-table-column>
        <el-table-column align="center" prop="fid" label="父表号">
        </el-table-column>
        <el-table-column align="center" label="安全记录(天)">
          <el-table-column align="center" label="无责任事故" prop="aqjlwzrsg"></el-table-column>
          <el-table-column align="center" label="无设备事故" prop="aqjlwsbsg"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="倒闸操作">
          <el-table-column align="center" label="次数" prop="dzczcs"></el-table-column>
          <el-table-column align="center" label="正确率" prop="dzczzql"></el-table-column>
          <el-table-column align="center" label="票数" prop="dzczps"></el-table-column>
          <el-table-column align="center" label="合格率" prop="dzczhgl"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="工作票">
          <el-table-column align="center" label="一种" prop="gzpyz"></el-table-column>
          <el-table-column align="center" label="二种" prop="gzpez"></el-table-column>
          <el-table-column align="center" label="合格率" prop="gzphgl"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="保护动作次数">
          <el-table-column align="center" label="动作" prop="bhdzcsdz"></el-table-column>
          <el-table-column align="center" label="误动" prop="bhdzcswd"></el-table-column>
          <el-table-column align="center" label="正确率" prop="bhdzcszql"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="自动装置动作次数">
          <el-table-column align="center" label="动作" prop="zdzzdzcsdz"></el-table-column>
          <el-table-column align="center" label="误动" prop="zdzzdzcswd"></el-table-column>
          <el-table-column align="center" label="正确率" prop="zdzzdzcszql"></el-table-column>
        </el-table-column>
      </el-table>
      <!-- 设备评级统计表格 -->
      <el-table :data="sbpjTableData" v-show="sbpjVisible">
        <el-table-column type="index" label="序号">
        </el-table-column>
        <el-table-column align="center" prop="fid" label="父表号">
        </el-table-column>
        <el-table-column align="center" label="主变">
          <el-table-column align="center" label="单元数量" prop="zbdysl"></el-table-column>
          <el-table-column align="center" label="一类" prop="zbyl"></el-table-column>
          <el-table-column align="center" label="二类" prop="zbel"></el-table-column>
          <el-table-column align="center" label="三类" prop="zbsl"></el-table-column>
          <el-table-column align="center" label="完好率" prop="zbwhl"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="母线">
          <el-table-column align="center" label="单元数量" prop="mxdysl"></el-table-column>
          <el-table-column align="center" label="一类" prop="mxyl"></el-table-column>
          <el-table-column align="center" label="二类" prop="mxel"></el-table-column>
          <el-table-column align="center" label="三类" prop="mxsl"></el-table-column>
          <el-table-column align="center" label="完好率" prop="mxwhl"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="开关">
          <el-table-column align="center" label="单元数量" prop="kgdysl"></el-table-column>
          <el-table-column align="center" label="一类" prop="kgyl"></el-table-column>
          <el-table-column align="center" label="二类" prop="kgel"></el-table-column>
          <el-table-column align="center" label="三类" prop="kgsl"></el-table-column>
          <el-table-column align="center" label="完好率" prop="kgwhl"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="电力电容器">
          <el-table-column align="center" label="单元数量" prop="dldrqdysl"></el-table-column>
          <el-table-column align="center" label="一类" prop="dldrqyl"></el-table-column>
          <el-table-column align="center" label="二类" prop="dldrqel"></el-table-column>
          <el-table-column align="center" label="三类" prop="dldrqsl"></el-table-column>
          <el-table-column align="center" label="完好率" prop="dldrqwhl"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="所用变">
          <el-table-column align="center" label="单元数量" prop="sybdysl"></el-table-column>
          <el-table-column align="center" label="一类" prop="sybyl"></el-table-column>
          <el-table-column align="center" label="二类" prop="sybel"></el-table-column>
          <el-table-column align="center" label="三类" prop="sybsl"></el-table-column>
          <el-table-column align="center" label="完好率" prop="sybwhl"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="刀闸">
          <el-table-column align="center" label="单元数量" prop="dzdysl"></el-table-column>
          <el-table-column align="center" label="一类" prop="dzyl"></el-table-column>
          <el-table-column align="center" label="二类" prop="dzel"></el-table-column>
          <el-table-column align="center" label="三类" prop="dzsl"></el-table-column>
          <el-table-column align="center" label="完好率" prop="dzwhl"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="直流系统">
          <el-table-column align="center" label="单元数量" prop="zlxtdysl"></el-table-column>
          <el-table-column align="center" label="一类" prop="zlxtyl"></el-table-column>
          <el-table-column align="center" label="二类" prop="zlxtel"></el-table-column>
          <el-table-column align="center" label="三类" prop="zlxtsl"></el-table-column>
          <el-table-column align="center" label="完好率" prop="zlxtwhl"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="防雷接地">
          <el-table-column align="center" label="单元数量" prop="fljddysl"></el-table-column>
          <el-table-column align="center" label="一类" prop="fljdyl"></el-table-column>
          <el-table-column align="center" label="二类" prop="fljdel"></el-table-column>
          <el-table-column align="center" label="三类" prop="fljdsl"></el-table-column>
          <el-table-column align="center" label="完好率" prop="fljdwhl"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="继自装置">
          <el-table-column align="center" label="单元数量" prop="jzzzdysl"></el-table-column>
          <el-table-column align="center" label="一类" prop="jzzzyl"></el-table-column>
          <el-table-column align="center" label="二类" prop="jzzzel"></el-table-column>
          <el-table-column align="center" label="三类" prop="jzzzsl"></el-table-column>
          <el-table-column align="center" label="完好率" prop="jzzzwhl"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="监控系统">
          <el-table-column align="center" label="单元数量" prop="jkxtdysl"></el-table-column>
          <el-table-column align="center" label="一类" prop="jkxtyl"></el-table-column>
          <el-table-column align="center" label="二类" prop="jkxtel"></el-table-column>
          <el-table-column align="center" label="三类" prop="jkxtsl"></el-table-column>
          <el-table-column align="center" label="完好率" prop="jkxtwhl"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="五防程序锁">
          <el-table-column align="center" label="单元数量" prop="wfcxsdysl"></el-table-column>
          <el-table-column align="center" label="一类" prop="wfcxsyl"></el-table-column>
          <el-table-column align="center" label="二类" prop="wfcxsel"></el-table-column>
          <el-table-column align="center" label="三类" prop="wfcxssl"></el-table-column>
          <el-table-column align="center" label="完好率" prop="wfcxswhl"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="土建">
          <el-table-column align="center" label="单元数量" prop="tjdysl"></el-table-column>
          <el-table-column align="center" label="一类" prop="tjyl"></el-table-column>
          <el-table-column align="center" label="二类" prop="tjel"></el-table-column>
          <el-table-column align="center" label="三类" prop="tjsl"></el-table-column>
          <el-table-column align="center" label="完好率" prop="tjwhl"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="设备指标">
          <el-table-column align="center" label="台数" prop="sbzbts"></el-table-column>
          <el-table-column align="center" label="完好率" prop="sbzbwhl"></el-table-column>
          <el-table-column align="center" label="一类率" prop="sbzbyll"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="设备维护次数">
          <el-table-column align="center" label="一次" prop="sbwhcsyc"></el-table-column>
          <el-table-column align="center" label="二次" prop="sbwhcsec"></el-table-column>
          <el-table-column align="center" label="直流" prop="sbwhcszl"></el-table-column>
          <el-table-column align="center" label="及时率" prop="sbwhcsjsl"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="主变容器" prop="zbrl">
        </el-table-column>
        <el-table-column align="center" label="台数" prop="ts">
        </el-table-column>

      </el-table>
      <!-- 电压统计表格 -->
      <el-table :data="dytjTableData" v-show="dytjVisible">
        <el-table-column type="index" label="序号">
        </el-table-column>
        <el-table-column align="center" prop="fid" label="父表号">
        </el-table-column>
        <el-table-column align="center" label="最高kv">
          <el-table-column align="center" label="35kv母线" prop="zgkvsswkvmx"></el-table-column>
          <el-table-column align="center" label="10kv母线" prop="zgkvskvmx"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="最低kv">
          <el-table-column align="center" label="35kv母线" prop="zdkvsswkvmx"></el-table-column>
          <el-table-column align="center" label="10kv母线" prop="zdkvskvmx"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="超标小时">
          <el-table-column align="center" label="高">
            <el-table-column align="center" label="35kv母线" prop="cbxsgsswkvmx"></el-table-column>
            <el-table-column align="center" label="10kv母线" prop="cbxsgskvmx"></el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="超标小时">
          <el-table-column align="center" label="低">
            <el-table-column align="center" label="35kv母线" prop="cbxsdsswkvmx"></el-table-column>
            <el-table-column align="center" label="10kv母线" prop="cbxsdskvmx"></el-table-column>
          </el-table-column>
        </el-table-column>

      </el-table>
      <!-- 操作次数统计表格 -->
      <el-table :data="czcsTableData" v-show="czcsVisible">
        <el-table-column type="index" label="序号">
        </el-table-column>
        <el-table-column align="center" prop="fid" label="父表号">
        </el-table-column>
        <el-table-column align="center" label="姓名" prop="xm">
        </el-table-column>
        <el-table-column align="center" label="本月" prop="benyue">
        </el-table-column>
        <el-table-column align="center" label="累计" prop="lj">
        </el-table-column>

      </el-table>
      <!-- 缺  陷  及  处  理  情  况统计表格 -->
      <el-table :data="qxjclqkTableData" v-show="qxjclqkVisible">
        <el-table-column type="index" label="序号">
        </el-table-column>
        <el-table-column align="center" prop="fid" label="父表号">
        </el-table-column>
        <el-table-column align="center" label="内容" prop="nr">
        </el-table-column>

      </el-table>
      <!-- 运     行     说    明  情  况统计表格 -->
      <el-table :data="yxsmTableData" v-show="yxsmVisible">
        <el-table-column type="index" label="序号">
        </el-table-column>
        <el-table-column align="center" prop="fid" label="父表号">
        </el-table-column>
        <el-table-column align="center" label="内容" prop="nr">
        </el-table-column>

      </el-table>
      <!-- 安全措施、反事故措施执行情况统计表格 -->
      <el-table :data="aqcsTableData" v-show="aqcsVisible">
        <el-table-column type="index" label="序号">
        </el-table-column>
        <el-table-column align="center" prop="fid" label="父表号">
        </el-table-column>
        <el-table-column align="center" label="内容" prop="nr">
        </el-table-column>

      </el-table>





    </div>
  </div>
</template>

<script>
import bdsybApi from '@/api/sjtb/scgl/bdsyb'

export default {
  data() {
    return {


      currentPageName:'总览',
      activeName: 'first',
      // 总览表格数据
      zonglanTableData: [],
      //电量统计表格数据
      dianliangtongjiTableData:[],
      //月负荷最大值表格数据
      yfhzdzjcxdlTableData:[],
      //出线电量表格数据
      cxdlTableData:[],
      //指标统计表格数据
      zbtjTableData:[],
      //设备评级表格数据
      sbpjTableData:[],
      //电压统计表格数据
      dytjTableData:[],
      // 操作次数表格数据
      czcsTableData:[],
      //缺陷表格数据
      qxjclqkTableData:[],
      //运行说明表格数据
      yxsmTableData:[],
      //安全措施和反事故措施表格数据
      aqcsTableData:[],


      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },



      //总览区域可见性
      zonglanVisible:true,

      //电量统计区域可见性
      dianliangtongjiVisible:false,

      //月负荷最大值区域可见性
      yfhzdzjcxdlVisible:false,

      //出线电量区域可见性
      cxdlVisible:false,

      //指标统计区域可见性
      zbtjVisible:false,

      //设备评级区域可见性:
      sbpjVisible:false,

      //电压统计区域可见性
      dytjVisible:false,

      //操作次数统计区域可见性
      czcsVisible:false,

      //缺陷及处理说明
      qxjclqkVisible:false,

      // 运行说明
      yxsmVisible:false,

      //安全措施、反事故措施执行情况
      aqcsVisible:false,




    }
  },

  created() {

    this.search()

  },

  methods: {

    async search(){
      if(this.currentPageName==='总览'){
        //发送查询请求
        let res = await bdsybApi.getZonglan(this.pageNo,this.pageSize);
        //判断是否成功
        if(res.success){
          // //赋值
          this.zonglanTableData = res.data.records;
          // //总数量
          this.total = res.data.total;
        }
      }else if(this.currentPageName==='电量统计') {
        //发送查询请求
        let res = await bdsybApi.getDltj(this.pageNo, this.pageSize);
        //判断是否成功
        if (res.success) {
          // //赋值
          this.dianliangtongjiTableData = res.data.records;
          // //总数量
          this.total = res.data.total;
        }
      }else if(this.currentPageName==='月负荷最大值') {
        //发送查询请求
        let res = await bdsybApi.getYfhzdz(this.pageNo, this.pageSize);
        //判断是否成功
        if (res.success) {
          // //赋值
          this.yfhzdzjcxdlTableData = res.data.records;
          // //总数量
          this.total = res.data.total;
        }
      }else if(this.currentPageName==='出线电量') {
        //发送查询请求
        let res = await bdsybApi.getCxdl(this.pageNo, this.pageSize);
        //判断是否成功
        if (res.success) {
          // //赋值
          this.cxdlTableData = res.data.records;
          // //总数量
          this.total = res.data.total;
        }
      }else if(this.currentPageName==='指标统计') {
        //发送查询请求
        let res = await bdsybApi.getZbtj(this.pageNo, this.pageSize);
        //判断是否成功
        if (res.success) {
          // //赋值
          this.zbtjTableData= res.data.records;
          // //总数量
          this.total = res.data.total;
        }
      }else if(this.currentPageName==='设备评级') {
        //发送查询请求
        let res = await bdsybApi.getSbpj(this.pageNo, this.pageSize);
        //判断是否成功
        if (res.success) {
          // //赋值
          this.sbpjTableData= res.data.records;
          // //总数量
          this.total = res.data.total;
        }
      }else if(this.currentPageName==='电压统计') {
        //发送查询请求
        let res = await bdsybApi.getDytj(this.pageNo, this.pageSize);
        //判断是否成功
        if (res.success) {
          // //赋值
          this.dytjTableData= res.data.records;
          // //总数量
          this.total = res.data.total;
        }
      }else if(this.currentPageName==='操作次数统计') {
        //发送查询请求
        let res = await bdsybApi.getCzcstj(this.pageNo, this.pageSize);
        //判断是否成功
        if (res.success) {
          // //赋值
          this.czcsTableData= res.data.records;
          // //总数量
          this.total = res.data.total;
        }
      }else if(this.currentPageName==='缺陷及处理情况') {
        //发送查询请求
        let res = await bdsybApi.getQxjclqk(this.pageNo, this.pageSize);
        //判断是否成功
        if (res.success) {
          // //赋值
          this.qxjclqkTableData= res.data.records;
          // //总数量
          this.total = res.data.total;
        }
      }else if(this.currentPageName==='运行说明') {
        //发送查询请求
        let res = await bdsybApi.getYxsm(this.pageNo, this.pageSize);
        //判断是否成功
        if (res.success) {
          // //赋值
          this.yxsmTableData= res.data.records;
          // //总数量
          this.total = res.data.total;
        }
      }else if(this.currentPageName==='安全措施、反事故措施执行情况') {
        //发送查询请求
        let res = await bdsybApi.getAqcs(this.pageNo, this.pageSize);
        //判断是否成功
        if (res.success) {
          // //赋值
          this.aqcsTableData= res.data.records;
          // //总数量
          this.total = res.data.total;
        }
      }
    },


    onSubmit() {
      console.log('submit!');
    },
    handleClick(row, handle) {
      if(this.currentPageName==='总览'){
        // 代表现在在总览页面打开隐藏的form表单，应该显示总览的Form
        this.zonglanFormVisible = true;
        this.zonglanFormData=row;
        if(handle === 'check'){
          this.myDialogTitle = '变电所运行月报总览信息查看'
          this.ischeck = true
          this.$message({ message: '成功打开', type: 'success' });
        }else if (handle === 'edit') {
          this.myDialogTitle = '变电所运行月报总览信息编辑'
          this.ischeck = false
          this.$message({ message: '编辑成功', type: 'success' });
        } else if (handle === 'add') {
          this.myDialogTitle = '变电所运行月报总览信息填报'
          this.ischeck = false
          this.$message({ message: '添加成功', type: 'success' });
        }
        this.dianliangtongjiFormVisible=false
        this.yfhzdzjcxdlFormVisible=false
        this.zbtjFormVisible=false
        this.sbpjFormVisible=false
        this.dytjFormVisible=false
        this.czcsFormVisible=false
        this.qxjclqkFormVisible=false
        this.yxsmFormVisible=false
        this.aqcsFormVisible=false
        this.cxdlFormVisible=false
      }else if(this.currentPageName==='电量统计'){
        this.dianliangtongjiFormVisible = true;
        this.dianliangtongjiFormData=row;
        if(handle === 'check'){
          this.myDialogTitle = '变电所运行月报电量统计信息查看'
          this.ischeck = true
          this.$message({ message: '成功打开', type: 'success' });
        }else if (handle === 'edit') {
          this.myDialogTitle = '变电所运行月报电量统计信息编辑'
          this.ischeck = false
          this.$message({ message: '编辑成功', type: 'success' });
        } else if (handle === 'add') {
          this.myDialogTitle = '变电所运行月报电量统计信息填报'
          this.ischeck = false
          this.$message({ message: '添加成功', type: 'success' });
        }
        this.zonglanFormVisible=false
        this.yfhzdzjcxdlFormVisible=false
        this.zbtjFormVisible=false
        this.sbpjFormVisible=false
        this.dytjFormVisible=false
        this.czcsFormVisible=false
        this.qxjclqkFormVisible=false
        this.yxsmFormVisible=false
        this.aqcsFormVisible=false
        this.cxdlFormVisible=false
      }else if(this.currentPageName==='月负荷最大值'){
        this.yfhzdzjcxdlFormVisible=true
        this.yfhzdzjcxdlFormData=row;
        if(handle === 'check'){
          this.myDialogTitle = '变电所运行月报月负荷最大值信息查看'
          this.ischeck = true
          this.$message({ message: '成功打开', type: 'success' });
        }else if (handle === 'edit') {
          this.myDialogTitle = '变电所运行月报月负荷最大值信息编辑'
          this.ischeck = false
          this.$message({ message: '编辑成功', type: 'success' });
        } else if (handle === 'add') {
          this.myDialogTitle = '变电所运行月报月负荷最大值信息填报'
          this.ischeck = false
          this.$message({ message: '添加成功', type: 'success' });
        }
        this.zonglanFormVisible=false
        this.dianliangtongjiFormVisible = false
        this.zbtjFormVisible=false
        this.sbpjFormVisible=false
        this.dytjFormVisible=false
        this.czcsFormVisible=false
        this.qxjclqkFormVisible=false
        this.yxsmFormVisible=false
        this.aqcsFormVisible=false
        this.cxdlFormVisible=false
      }else if(this.currentPageName==='出线电量'){
        this.cxdlFormVisible=true
        this.yfhzdzjcxdlFormData=row;
        if(handle === 'check'){
          this.myDialogTitle = '变电所运行月报出线电量信息查看'
          this.ischeck = true
          this.$message({ message: '成功打开', type: 'success' });
        }else if (handle === 'edit') {
          this.myDialogTitle = '变电所运行月报出线电量信息编辑'
          this.ischeck = false
          this.$message({ message: '编辑成功', type: 'success' });
        } else if (handle === 'add') {
          this.myDialogTitle = '变电所运行月报出线电量信息填报'
          this.ischeck = false
          this.$message({ message: '添加成功', type: 'success' });
        }
        this.zonglanFormVisible=false
        this.dianliangtongjiFormVisible = false
        this.zbtjFormVisible=false
        this.sbpjFormVisible=false
        this.dytjFormVisible=false
        this.czcsFormVisible=false
        this.qxjclqkFormVisible=false
        this.yxsmFormVisible=false
        this.aqcsFormVisible=false
        this.yfhzdzjcxdlFormVisible=false
      }else if(this.currentPageName==='指标统计'){
        this.zbtjFormVisible=true
        this.zbtjFormData=row;
        if(handle === 'check'){
          this.myDialogTitle = '变电所运行月报指标统计信息查看'
          this.ischeck = true
          this.$message({ message: '成功打开', type: 'success' });
        }else if (handle === 'edit') {
          this.myDialogTitle = '变电所运行月报指标统计信息编辑'
          this.ischeck = false
          this.$message({ message: '编辑成功', type: 'success' });
        } else if (handle === 'add') {
          this.myDialogTitle = '变电所运行月报指标统计信息填报'
          this.ischeck = false
          this.$message({ message: '添加成功', type: 'success' });
        }
        this.zonglanFormVisible=false
        this.dianliangtongjiFormVisible = false
        this.yfhzdzjcxdlFormVisible=false
        this.sbpjFormVisible=false
        this.dytjFormVisible=false
        this.czcsFormVisible=false
        this.qxjclqkFormVisible=false
        this.yxsmFormVisible=false
        this.aqcsFormVisible=false
        this.cxdlFormVisible=false
      }else if(this.currentPageName==='设备评级'){
        this.sbpjFormVisible=true
        this.sbpjFormData=row;
        if(handle === 'check'){
          this.myDialogTitle = '变电所运行月报设备评级信息查看'
          this.ischeck = true
          this.$message({ message: '成功打开', type: 'success' });
        }else if (handle === 'edit') {
          this.myDialogTitle = '变电所运行月报设备评级信息编辑'
          this.ischeck = false
          this.$message({ message: '编辑成功', type: 'success' });
        } else if (handle === 'add') {
          this.myDialogTitle = '变电所运行月报设备评级信息填报'
          this.ischeck = false
          this.$message({ message: '添加成功', type: 'success' });
        }
        this.zonglanFormVisible=false
        this.dianliangtongjiFormVisible = false
        this.yfhzdzjcxdlFormVisible=false
        this.zbtjFormVisible=false
        this.dytjFormVisible=false
        this.czcsFormVisible=false
        this.qxjclqkFormVisible=false
        this.yxsmFormVisible=false
        this.aqcsFormVisible=false
        this.cxdlFormVisible=false
      }else if(this.currentPageName==='电压统计'){
        this.dytjFormVisible=true
        this.dytjFormData=row;
        if(handle === 'check'){
          this.myDialogTitle = '变电所运行月报电压统计信息查看'
          this.ischeck = true
          this.$message({ message: '成功打开', type: 'success' });
        }else if (handle === 'edit') {
          this.myDialogTitle = '变电所运行月报电压统计信息编辑'
          this.ischeck = false
          this.$message({ message: '编辑成功', type: 'success' });
        } else if (handle === 'add') {
          this.myDialogTitle = '变电所运行月报电压统计信息填报'
          this.ischeck = false
          this.$message({ message: '添加成功', type: 'success' });
        }
        this.zonglanFormVisible=false
        this.dianliangtongjiFormVisible = false
        this.yfhzdzjcxdlFormVisible=false
        this.zbtjFormVisible=false
        this.sbpjFormVisible=false
        this.czcsFormVisible=false
        this.qxjclqkFormVisible=false
        this.yxsmFormVisible=false
        this.aqcsFormVisible=false
        this.cxdlFormVisible=false
      }else if(this.currentPageName==='操作次数统计'){
        this.czcsFormVisible=true
        this.czcsFormData=row;
        if(handle === 'check'){
          this.myDialogTitle = '变电所运行月报操作次数统计信息查看'
          this.ischeck = true
          this.$message({ message: '成功打开', type: 'success' });
        }else if (handle === 'edit') {
          this.myDialogTitle = '变电所运行月报操作次数统计信息编辑'
          this.ischeck = false
          this.$message({ message: '编辑成功', type: 'success' });
        } else if (handle === 'add') {
          this.myDialogTitle = '变电所运行月报操作次数统计信息填报'
          this.ischeck = false
          this.$message({ message: '添加成功', type: 'success' });
        }
        this.zonglanFormVisible=false
        this.dianliangtongjiFormVisible = false
        this.yfhzdzjcxdlFormVisible=false
        this.zbtjFormVisible=false
        this.sbpjFormVisible=false
        this.dytjFormVisible=false
        this.qxjclqkFormVisible=false
        this.yxsmFormVisible=false
        this.aqcsFormVisible=false
        this.cxdlFormVisible=false
      }else if(this.currentPageName==='缺陷及处理情况'){
        this.qxjclqkFormVisible=true
        this.qxjclqkFormData=row;
        if(handle === 'check'){
          this.myDialogTitle = '变电所运行月报缺陷及处理情况信息查看'
          this.ischeck = true
          this.$message({ message: '成功打开', type: 'success' });
        }else if (handle === 'edit') {
          this.myDialogTitle = '变电所运行月报缺陷及处理情况信息编辑'
          this.ischeck = false
          this.$message({ message: '编辑成功', type: 'success' });
        } else if (handle === 'add') {
          this.myDialogTitle = '变电所运行月报缺陷及处理情况信息填报'
          this.ischeck = false
          this.$message({ message: '添加成功', type: 'success' });
        }
        this.zonglanFormVisible=false
        this.dianliangtongjiFormVisible = false
        this.yfhzdzjcxdlFormVisible=false
        this.zbtjFormVisible=false
        this.sbpjFormVisible=false
        this.dytjFormVisible=false
        this.czcsFormVisible=false
        this.yxsmFormVisible=false
        this.aqcsFormVisible=false
        this.cxdlFormVisible=false
      }else if(this.currentPageName==='运行说明'){
        this.yxsmFormVisible=true
        this.yxsmFormData=row;
        if(handle === 'check'){
          this.myDialogTitle = '变电所运行月报运行说明信息查看'
          this.ischeck = true
          this.$message({ message: '成功打开', type: 'success' });
        }else if (handle === 'edit') {
          this.myDialogTitle = '变电所运行月报运行说明信息编辑'
          this.ischeck = false
          this.$message({ message: '编辑成功', type: 'success' });
        } else if (handle === 'add') {
          this.myDialogTitle = '变电所运行月报运行说明信息填报'
          this.ischeck = false
          this.$message({ message: '添加成功', type: 'success' });
        }
        this.zonglanFormVisible=false
        this.dianliangtongjiFormVisible = false
        this.yfhzdzjcxdlFormVisible=false
        this.zbtjFormVisible=false
        this.sbpjFormVisible=false
        this.dytjFormVisible=false
        this.czcsFormVisible=false
        this.qxjclqkFormVisible=false
        this.aqcsFormVisible=false
        this.cxdlFormVisible=false
      }else if(this.currentPageName==='安全措施、反事故措施执行情况'){
        this.aqcsFormVisible=true
        this.aqcsFormData=row;
        if(handle === 'check'){
          this.myDialogTitle = '变电所运行月报安全措施、反事故措施执行情况信息查看'
          this.ischeck = true
          this.$message({ message: '成功打开', type: 'success' });
        }else if (handle === 'edit') {
          this.myDialogTitle = '变电所运行月报安全措施、反事故措施执行情况信息编辑'
          this.ischeck = false
          this.$message({ message: '编辑成功', type: 'success' });
        } else if (handle === 'add') {
          this.myDialogTitle = '变电所运行月报安全措施、反事故措施执行情况信息填报'
          this.ischeck = false
          this.$message({ message: '添加成功', type: 'success' });
        }
        this.zonglanFormVisible=false
        this.dianliangtongjiFormVisible = false
        this.yfhzdzjcxdlFormVisible=false
        this.zbtjFormVisible=false
        this.sbpjFormVisible=false
        this.dytjFormVisible=false
        this.czcsFormVisible=false
        this.qxjclqkFormVisible=false
        this.yxsmFormVisible=false
        this.cxdlFormVisible=false
      }
    },
    uploadData() {
      console.log('批量导入成功')
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    // 序号计算
    indexMethod (index) {
      // index默认在0开始，这里+1
      return index + 1 + (this.currentPage - 1) * this.pageSize
    },
    //Tab标签区域切换按钮事件
    handleMenuClick(tab, event){
      var content=event.target.innerText
      if(content==="总览"){
        this.currentPageName='总览'
        this.search()
        this.zonglanVisible=true
        this.dianliangtongjiVisible=false
        this.yfhzdzjcxdlVisible=false
        this.zbtjVisible=false
        this.sbpjVisible=false
        this.dytjVisible=false
        this.czcsVisible=false
        this.qxjclqkVisible=false
        this.yxsmVisible=false
        this.aqcsVisible=false
        this.cxdlVisible=false
      }else if(content==="电量统计"){
        this.currentPageName='电量统计'
        this.search()
        this.dianliangtongjiVisible=true
        this.zonglanVisible=false
        this.yfhzdzjcxdlVisible=false
        this.zbtjVisible=false
        this.sbpjVisible=false
        this.dytjVisible=false
        this.czcsVisible=false
        this.qxjclqkVisible=false
        this.yxsmVisible=false
        this.aqcsVisible=false
        this.cxdlVisible=false
      }else if(content==='月负荷最大值'){
        this.currentPageName='月负荷最大值'
        this.search()
        this.yfhzdzjcxdlVisible=true
        this.zonglanVisible=false
        this.dianliangtongjiVisible=false
        this.zbtjVisible=false
        this.sbpjVisible=false
        this.dytjVisible=false
        this.czcsVisible=false
        this.qxjclqkVisible=false
        this.yxsmVisible=false
        this.aqcsVisible=false
        this.cxdlVisible=false
      }else if(content==='出线电量'){
        this.currentPageName='出线电量'
        this.search()
        this.cxdlVisible=true
        this.yfhzdzjcxdlVisible=false
        this.zonglanVisible=false
        this.dianliangtongjiVisible=false
        this.zbtjVisible=false
        this.sbpjVisible=false
        this.dytjVisible=false
        this.czcsVisible=false
        this.qxjclqkVisible=false
        this.yxsmVisible=false
        this.aqcsVisible=false
      }else if(content==='指标统计'){
        this.currentPageName='指标统计'
        this.search()
        this.zbtjVisible=true
        this.zonglanVisible=false
        this.dianliangtongjiVisible=false
        this.yfhzdzjcxdlVisible=false
        this.sbpjVisible=false
        this.dytjVisible=false
        this.czcsVisible=false
        this.qxjclqkVisible=false
        this.yxsmVisible=false
        this.aqcsVisible=false
        this.cxdlVisible=false
      }else if(content==='设备评级'){
        this.currentPageName='设备评级'
        this.search()
        this.sbpjVisible=true
        this.zonglanVisible=false
        this.dianliangtongjiVisible=false
        this.yfhzdzjcxdlVisible=false
        this.zbtjVisible=false
        this.dytjVisible=false
        this.czcsVisible=false
        this.qxjclqkVisible=false
        this.yxsmVisible=false
        this.aqcsVisible=false
        this.cxdlVisible=false
      }else if(content==='电压统计'){
        this.currentPageName='电压统计'
        this.search()
        this.dytjVisible=true
        this.zonglanVisible=false
        this.dianliangtongjiVisible=false
        this.yfhzdzjcxdlVisible=false
        this.zbtjVisible=false
        this.sbpjVisible=false
        this.czcsVisible=false
        this.qxjclqkVisible=false
        this.yxsmVisible=false
        this.aqcsVisible=false
        this.cxdlVisible=false
      }else if(content==='操作次数统计'){
        this.currentPageName='操作次数统计'
        this.search()
        this.czcsVisible=true
        this.zonglanVisible=false
        this.dianliangtongjiVisible=false
        this.yfhzdzjcxdlVisible=false
        this.zbtjVisible=false
        this.sbpjVisible=false
        this.dytjVisible=false
        this.qxjclqkVisible=false
        this.yxsmVisible=false
        this.aqcsVisible=false
        this.cxdlVisible=false
      }else if(content==='缺陷及处理情况'){
        this.currentPageName='缺陷及处理情况'
        this.search()
        this.qxjclqkVisible=true
        this.zonglanVisible=false
        this.dianliangtongjiVisible=false
        this.yfhzdzjcxdlVisible=false
        this.zbtjVisible=false
        this.sbpjVisible=false
        this.dytjVisible=false
        this.czcsVisible=false
        this.yxsmVisible=false
        this.aqcsVisible=false
        this.cxdlVisible=false
      }else if(content==='运行说明'){
        this.currentPageName='运行说明'
        this.search()
        this.yxsmVisible=true
        this.zonglanVisible=false
        this.dianliangtongjiVisible=false
        this.yfhzdzjcxdlVisible=false
        this.zbtjVisible=false
        this.sbpjVisible=false
        this.dytjVisible=false
        this.czcsVisible=false
        this.qxjclqkVisible=false
        this.aqcsVisible=false
        this.cxdlVisible=false
      }else{
        this.currentPageName='安全措施、反事故措施执行情况'
        this.search()
        this.aqcsVisible=true
        this.zonglanVisible=false
        this.dianliangtongjiVisible=false
        this.yfhzdzjcxdlVisible=false
        this.zbtjVisible=false
        this.sbpjVisible=false
        this.dytjVisible=false
        this.czcsVisible=false
        this.qxjclqkVisible=false
        this.yxsmVisible=false
        this.cxdlVisible=false
      }

    }
  }
}
</script>

<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: large;
  padding-left: 10px;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myButtons {
  float: right
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}
</style>
